<template>
  <div class="page-miH page-bgBack">
    <rTitle :type="'back'" :tit="'处理异常数据'" />
    <a-alert
      :message="`有${errorDataCount}条数据异常，请尽快处理`"
      description="您可以点击忽略放弃这条数据，或者点击覆盖替换已有的数据"
      type="error"
      closable
      show-icon
      style="margin: 24px; background-color: #fff1f0"
    />
    <div class="xq-form-wrapper" style="margin: 24px; padding-bottom: 20px">
      <a-spin :spinning="spinning" class="xq-form-content">
        <XqTable
          :customize="FormJson['config']['table']['customize']"
          :scroll="{ x: columns.length * 70 }"
          :pagination="false"
          :dataSource="tableData"
          :columns="columns"
        >
          <template v-for="(col, index) in columns" v-slot:[`xq_${col.dataIndex}`]>
            <span :key="index">
              {{ col.customTitle }}
            </span>
          </template>
          <!-- eslint-disable-next-line prettier/prettier -->
          <template v-for="(col, index) in columns" v-slot:[col.dataIndex]="text, record">
            <div v-if="col.dataIndex === 'positionCount'" :key="index">导入</div>
            <div v-else-if="col.dataIndex === 'skill' && record.skill" :key="index" class="tags">
              <div v-for="(item, index) in record.skill.split(',')" :key="index">{{ item }}</div>
            </div>
            <span v-else-if="col.dataIndex === 'errorReason'" :key="index">
              <span class="d1"></span> <span class="d2">{{ text }} </span></span
            >
            <div v-else-if="col.dataIndex === 'tableAction'" :key="index" class="tableAction">
              <span>
                <a-popconfirm
                  :title="`确认要忽略吗？`"
                  ok-text="确认"
                  cancel-text="取消"
                  @confirm="onDelete(record.id)"
                  :disabled="record.errorReason === '人才库中已有此员工'"
                >
                  <a :disabled="record.errorReason === '人才库中已有此员工'">忽略</a>
                </a-popconfirm>
                <a-divider type="vertical" v-if="record.errorReason === '人才库中已有此手机号数据'" />
                <a-popconfirm
                  :title="`确认要覆盖已有吗？`"
                  ok-text="确认"
                  cancel-text="取消"
                  @confirm="onDelete(record.id, record.talentPoolId, record.jobSeekerId)"
                >
                  <a v-if="record.errorReason === '人才库中已有此手机号数据'">覆盖已有</a>
                </a-popconfirm>
              </span>
            </div>
            <XqTableCell v-else :key="index" :record="record" :field="FormJson['fields'][col.dataIndex]" :dynamicData="dynamicData" />
          </template>
        </XqTable>
        <div class="xq-form-content-pagination">
          <div class="xq-form-content-pagination-total">共 {{ total }} 条</div>
          <a-pagination
            v-model="pageNo"
            :page-size="pageSize"
            :total="total"
            :show-size-changer="true"
            :show-quick-jumper="true"
            :page-size-options="['10', '20', '50', '100']"
            @change="onPageChange"
            @showSizeChange="onPageSizeChange"
          />
        </div>
      </a-spin>
    </div>
  </div>
</template>

<script>
import FormJson from "./FormJson";
import XqCurdMixin from "xqjr-plugin-form/mixins/XqCurdMixin";
import rTitle from "../../component/rTitle";
import { getTalentPoolImportInfo, delIgnoreTalentPoolDataById } from "./api";

const curdMixin = new XqCurdMixin({
  FormJson,
  tableConfigKey: "table"
});

export default {
  mixins: [curdMixin],
  components: { rTitle },
  data() {
    return {
      alertiVisible: true,
      spinning: false,
      tableData: [],
      total: 0,
      pageNo: 1,
      pageSize: 20,
      errorDataCount: 0,
      errorReason: [
        "表中有相同数据",
        "手机号重复",
        "手机号格式错误",
        "招工企业无法匹配",
        "求职职位无法匹配",
        "已投递过该岗位",
        "姓名为空",
        "性别为空",
        "手机号码为空"
      ]
    };
  },
  created() {
    this.onGetTalentPoolImportInfo();
    this.$store.commit("recruitment/talentPoolTempId", this.$route.query.talentPoolTempId);
  },
  methods: {
    async onGetTalentPoolImportInfo() {
      try {
        this.spinning = true;
        const { data } = await getTalentPoolImportInfo({
          talentPoolRelation: this.$route.query.talentPoolTempId,
          pageNo: this.pageNo,
          pageSize: this.pageSize,
          "orders[0].property": "gmtCreate",
          "orders[0].desc": true
        });
        this.tableData = data.errorData;
        this.total = data.errorDataCount;
        this.errorDataCount = data.errorDataCount;
        if (this.tableData.length <= 0 && this.pageNo > 1) {
          this.pageNo = this.pageNo - 1;
          this.onGetTalentPoolImportInfo();
        }
        setTimeout(() => (this.spinning = false), 500);
      } catch (err) {
        console.log("error log --> ", err);
        setTimeout(() => (this.spinning = false), 500);
      }
    },
    onPageChange(page) {
      this.pageNo = page;
      this.onGetTalentPoolImportInfo();
    },
    onPageSizeChange(current, pageSize) {
      this.pageNo = 1;
      this.pageSize = pageSize;
      this.onGetTalentPoolImportInfo();
    },
    handleClose() {
      this.alertiVisible = false;
    },
    async onDelete(talentPoolTempId, talentPoolId, jobSeekerId) {
      try {
        const data = {
          talentPoolTempId
        };
        if (talentPoolId) {
          data.talentPoolId = talentPoolId;
        }
        if (jobSeekerId) {
          data.jobSeekerId = jobSeekerId;
        }
        await delIgnoreTalentPoolDataById(data);
        this.onGetTalentPoolImportInfo();
      } catch (err) {
        console.log("error log --> ", err);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.tags {
  display: flex;
  div {
    padding: 0 8px;
    height: 22px;
    line-height: 22px;
    margin-right: 8px;
    background: rgba(0, 0, 0, 0.04);
    border-radius: 2px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    box-sizing: border-box;
  }
}
.d1 {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: #ff7085;
  border-radius: 50%;
  vertical-align: middle;
}
.d2 {
  display: inline-block;
}
</style>
